<template>
  <view class="infoOcr">
    <u-form ref="uForm" :model="params" label-width="160">
      <u-form-item :label="`${$t('申请单名')}:`">
        <text>{{ params.title }}</text>
      </u-form-item>
      <u-form-item v-if="params.deviceName" :label="`${$t('申请设备')}:`">
        <u-tag :text="params.deviceName" type="success"></u-tag>
      </u-form-item>
      <u-form-item :label="`${$t('申请时间')}:`">
        <text>{{ params.createDate }}</text>
      </u-form-item>
      <u-form-item v-if="params.content" :label="`${$t('申请内容')}:`">
        <text>{{ params.content }}</text>
      </u-form-item>
      <u-form-item v-if="params.applicationUsername" :label="`${$t('申请用户')}:`">
        <text>{{ params.applicationUsername }}</text>
      </u-form-item>
      <u-form-item v-if="params.applicationManager" :label="`${$t('审批人')}:`">
        <text>{{ params.applicationManager }}</text>
      </u-form-item>
      <u-form-item v-if="params.applicationKeeper" :label="`${$t('授权人')}:`">
        <text>{{ params.applicationKeeper }}</text>
      </u-form-item>
      <u-form-item v-if="params.applicationAuditor" :label="`${$t('审计人')}:`">
        <text>{{ params.applicationAuditor }}</text>
      </u-form-item>
      <view>
        <view class="u-form-item-title">{{$t('文件详情')}}:</view>
        <view class="lz-center">
          <mescroll-uni
            ref="mescrollRef"
            :down="downOption"
            :fixed="false"
            :up="upOption"
            @down="downCallback"
            @init="mescrollInit"
            @up="upCallback"
          >
            <!-- 数据列表 -->
            <good-list :list="ocr.list"></good-list>
          </mescroll-uni>
        </view>
      </view>
    </u-form>
  </view>
</template>
<script>
import goodList from './goodList.vue'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import { mapGetters, mapMutations } from 'vuex'

export default {
  mixins: [MescrollMixin],
  components: {
    goodList
  },
  computed: {
    ...mapGetters(['userInfo', 'api'])
  },
  props: {},
  data() {
    return {
      downOption: {
        auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
      },
      upOption: {
        auto: false, // 不自动加载
        noMoreSize: 4, //如果列	表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        empty: {
          tip: `~ ${this.$t('暂无记录')} ~`,
          fixed: true,
          top: '200rpx'
        },
        textNoMore: `~ ${this.$t('触底了')} ~`
      },
      params: {},
      ocr: {
        list: []
      }
    }
  },
  onLoad(op) {
    uni.setNavigationBarTitle({title: this.$t('详情')})
    try {
      this.params = JSON.parse(decodeURIComponent(op.data))
    } catch (e) {
      this.params = JSON.parse(op.data)
    }
    this.getInfo()
  },
  methods: {
    /*下拉刷新的回调 */
    downCallback() {
      this.ocr.list = []
      // 这里加载你想下拉刷新的数据, 比如刷新轮播数据
      // loadSwiper();
      // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
      this.mescroll.resetUpScroll()
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //使用记录
      this.get(page)
    },
    getInfo() {
      // 查询申请单对应设备阈值警告值
      this.$u
        .get(this.api.GLOBAL_deviceThreshold_findOcrThreshold + `/${this.params.id}`, {})
        .then((res) => {
          if (res.code === 200 && res.data && res.data.list) {
          }
        })
    },
    get(page) {
      // 查询该申请单对应OCR列表
      this.$u
        .get(
          this.api.GLOBAL_ocr_ocrResult_findCompareResult +
            `/${this.params.id}?&pageNum=${page.num}&pageSize=${page.size}&page=true`,
          {}
        )
        .then((res) => {
          if (page.num === 1) {
            this.ocr.list = []
          }
          if (res.code === 200 && res.data && res.data.list) {
            this.mescroll.endBySize(res.data.list.length, res.data.total)
            let arr = res.data.list.map((item) => {
              item.attachmentFileUrl =
                item.attachmentFileUrl &&
                item.attachmentFileUrl + '?Authorization=' + this.userInfo.token + '&us=app'
              item.useFileUrl =
                item.useFileUrl &&
                item.useFileUrl + '?Authorization=' + this.userInfo.token + '&us=app'
              item.auditorFileUrl =
                item.auditorFileUrl &&
                item.auditorFileUrl + '?Authorization=' + this.userInfo.token + '&us=app'
              item.imageList = [item.attachmentFileUrl, item.useFileUrl, item.auditorFileUrl]
              return item
            })
            this.ocr.list = this.ocr.list.concat(arr)
          } else {
            this.mescroll.endBySize(0, 0)
            this.ocr.list = []
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.infoOcr {
  background-color: #fff;
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  padding-bottom: 100rpx;

  .u-form-item-title {
    padding: 20rpx 0;
  }

  .lz-center {
    height: 500px;
  }
}
</style>
